<template>
	<div>
		<div>
		<quill-editor ref="myTextEditor" v-model="content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)">
		</quill-editor>
		</div>
		<div style="margin-top: 20px;">
			<label  v-for="item in items">
				<input class="wricon-input" style="display: none;" v-model="wricon"  type="radio" :value="item.id" />
				<span class="wricon">{{item.name}}</span>
			</label>
			<span class="addwricon">添加标签</span>
		</div>
		<div class="write-type">
			<span>类别：</span>
			<el-select v-model="value" placeholder="请选择">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			<el-button class="write-btn" type="success">啊……我要去了</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				items:[{name:'vue',id:'1'},{name:'javascript',id:"2"},{name:'html5',id:'3'}],
				content: '<h2>I am Example</h2>',
				editorOption: {
					// something config
				},
				options: [{
					value: '0',
					label: '心情小记'
				}, {
					value: '1',
					label: '技术小抄'
				}, {
					value: '2',
					label: '羞羞小片'
				}],
				value: '',
				wricon:''
			}
		},
		// if you need to manually control the data synchronization, parent component needs to explicitly emit an event instead of relying on implicit binding
		// 如果需要手动控制数据同步，父组件需要显式地处理changed事件
		methods: {
			onEditorBlur(editor) {
				console.log('editor blur!', editor)
			},
			onEditorFocus(editor) {
				console.log('editor focus!', editor)
			},
			onEditorReady(editor) {
				console.log('editor ready!', editor)
			},
			onEditorChange({
				editor,
				html,
				text
			}) {
				// console.log('editor change!', editor, html, text)
				this.content = html
			}
		},
		// if you need to get the current editor object, you can find the editor object like this, the $ref object is a ref attribute corresponding to the dom redefined
		// 如果你需要得到当前的editor对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的editor对象，实际上这里的$refs对应的是当前组件内所有关联了ref属性的组件元素对象
		computed: {
			editor() {
				return this.$refs.myTextEditor.quillEditor
			}
		},
		mounted() {
			// you can use current editor object to do something(editor methods)
			console.log('this is my editor', this.editor)
			// this.editor to do something...
		}
	}
</script>

<style>
.write-type {
	margin-top: 20px;;
}
.write-btn{
	margin-left: 10px;
}
.quill-editor {
	height: 400px;
	/*为了好看设置底边*/
	overflow: hidden;
	border-bottom: 1px solid #ccc;
}
.wricon {
	background-color: #1abc9c;
    padding: 2px 10px;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    margin-right: 10px;
    margin-bottom: 10px;
    display: inline-block;
}
.wricon-input:checked~.wricon {
	background: #fba3a3;
}
.addwricon {
	cursor: pointer;
}
</style>